<!DOCTYPE html>
<html>
<head>
    <title>创建视频背景</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .video-canvas {
            width: 100%;
            max-width: 640px;
            height: 360px;
            border: 2px solid #ddd;
            border-radius: 10px;
            margin: 20px 0;
        }
        .btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        .btn:hover {
            opacity: 0.9;
        }
        .info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            border-left: 4px solid #2196f3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎬 动态背景视频生成器</h1>
        
        <div class="info">
            <strong>说明：</strong>由于浏览器安全限制，无法直接生成MP4文件。建议您：
            <br>1. 使用在线视频生成工具创建渐变动画视频
            <br>2. 或者下载现成的抽象背景视频
            <br>3. 将视频文件命名为 <code>background.mp4</code> 并放在网站根目录
        </div>
        
        <canvas class="video-canvas" id="canvas"></canvas>
        
        <div>
            <button class="btn" onclick="startAnimation()">▶️ 预览动画效果</button>
            <button class="btn" onclick="stopAnimation()">⏹️ 停止动画</button>
        </div>
        
        <div class="info">
            <strong>推荐视频规格：</strong>
            <br>• 分辨率：1920x1080 或 1280x720
            <br>• 格式：MP4 (H.264编码)
            <br>• 时长：10-30秒循环
            <br>• 文件大小：建议小于5MB
        </div>
        
        <div class="info">
            <strong>免费视频资源网站：</strong>
            <br>• <a href="https://pixabay.com/videos/" target="_blank">Pixabay Videos</a>
            <br>• <a href="https://www.pexels.com/videos/" target="_blank">Pexels Videos</a>
            <br>• <a href="https://coverr.co/" target="_blank">Coverr</a>
            <br>搜索关键词：abstract, gradient, particles, motion background
        </div>
    </div>

    <script>
        let animationId;
        let startTime;
        
        function startAnimation() {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 640;
            canvas.height = 360;
            
            startTime = Date.now();
            
            function animate() {
                const elapsed = (Date.now() - startTime) / 1000;
                
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 创建渐变
                const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
                
                // 动态颜色变化
                const hue1 = (elapsed * 30) % 360;
                const hue2 = (elapsed * 30 + 120) % 360;
                const hue3 = (elapsed * 30 + 240) % 360;
                
                gradient.addColorStop(0, `hsl(${hue1}, 70%, 60%)`);
                gradient.addColorStop(0.5, `hsl(${hue2}, 70%, 60%)`);
                gradient.addColorStop(1, `hsl(${hue3}, 70%, 60%)`);
                
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 添加浮动圆形
                for (let i = 0; i < 5; i++) {
                    const x = canvas.width/2 + Math.sin(elapsed + i) * 100;
                    const y = canvas.height/2 + Math.cos(elapsed + i) * 50;
                    const radius = 20 + Math.sin(elapsed * 2 + i) * 10;
                    
                    ctx.beginPath();
                    ctx.arc(x, y, radius, 0, Math.PI * 2);
                    ctx.fillStyle = `hsla(${(elapsed * 50 + i * 60) % 360}, 80%, 80%, 0.3)`;
                    ctx.fill();
                }
                
                animationId = requestAnimationFrame(animate);
            }
            
            animate();
        }
        
        function stopAnimation() {
            if (animationId) {
                cancelAnimationFrame(animationId);
            }
        }
        
        // 自动开始预览
        window.addEventListener('load', startAnimation);
    </script>
</body>
</html>